<template>
	<view class="content" style="background-color: #fff;">
		<u-navbar rightIcon="search" bgColor="#FFC047" scrollable=false titleStyle="font-size:40rpx;color:#333" :placeholder='true'
			title="爆款伙拼" :autoBack="true">
		</u-navbar>
		<view class="top center">
			<view class="co6 fontS28">全场爆品·物超所值</view>
			<view class="card flex">
				<view class="">
					<image src="https://cdn.uviewui.com/uview/album/1.jpg" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
				<view class="right">
					<view class="box title co3 fontS32 fw7">
						香奈儿香水
					</view>
					<view class="box headImg flex">

						<u-avatar-group maxCount="4" size="24" :urls="urls"  gap="0.4"></u-avatar-group>
						<text class="co9 fontS24" style="margin-left: 20rpx;">10人成团中</text>
					</view>
					<view class="box title co3 fontS32">
						香奈儿香水
					</view>
					<view class="box title co3 fontS32">
						香奈儿香水
					</view>
				</view>
			</view>
		</view>

	</view>
</template>



<script>
	export default {
		data() {
			return {
				state: 0,
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				]
			}
		},
		methods: {
			click(item) {
				this.state = item.index
				// console.log('index', item.index);
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		.top {
			background-color: #FFC047;
			.card {
				
				margin: 32rpx auto 0;
				background-color: white; 
				width: 600rpx;  
				box-sizing: border-box;
				padding: 20rpx;
				.right{
					margin-left: 20rpx;
					// border: 1px solid red;  
					flex-grow: 1;
					text-align: left;
				}
			}
		}
	}
</style>
